<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 画坊 - 创建图片</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #f0f2f5;
            color: #202020;
        }
        
        .t-status-bar {
            height: 44px;
            background-color: #ffffff;
            width: 100%;
        }
        
        .t-input {
            border: 1px solid #dcdcdc;
            border-radius: 6px;
            padding: 12px 16px;
            font-size: 16px;
            background-color: white;
            width: 100%;
            outline: none;
            transition: border-color 0.2s;
        }
        
        .t-input:focus {
            border-color: #0052d9; /* TDesign primary blue */
            box-shadow: 0 0 0 2px rgba(0, 82, 217, 0.2);
        }
        
        .t-textarea {
            border: 1px solid #dcdcdc;
            border-radius: 6px;
            padding: 12px 16px;
            font-size: 16px;
            background-color: white;
            width: 100%;
            min-height: 120px;
            outline: none;
            transition: border-color 0.2s;
            resize: none;
        }
        
        .t-textarea:focus {
            border-color: #0052d9;
            box-shadow: 0 0 0 2px rgba(0, 82, 217, 0.2);
        }
        
        .t-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 24px;
            height: 44px;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s, opacity 0.2s;
        }
        
        .t-button-primary {
            background-color: #0052d9; /* TDesign primary blue */
            color: white;
        }
        
        .t-button-primary:active {
            opacity: 0.9;
        }
        
        .tag-pill {
            display: inline-block;
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 14px;
            margin-right: 8px;
            margin-bottom: 8px;
            background-color: white;
            border: 1px solid #e0e0e0;
            color: #666;
            transition: all 0.2s;
        }
        
        .tag-pill:active {
            background-color: #edf2fd;
            border-color: #0052d9;
            color: #0052d9;
        }
        
        .back-button {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
</head>
<body>
    <!-- Status Bar -->
    <div class="t-status-bar flex items-center px-4">
        <div class="back-button mr-1">
            <i class="ri-arrow-left-s-line text-lg"></i>
        </div>
        <div class="text-base font-medium">创建图片</div>
    </div>
    
    <!-- Content -->
    <div class="p-5">
        <div class="mb-6">
            <label class="block text-gray-700 mb-2">提示词</label>
            <textarea class="t-textarea" placeholder="试试描述: 主角 + 在哪里 + 做什么 + 像什么风格?"></textarea>
            
            <div class="mt-4">
                <div class="text-sm text-gray-600 mb-2">常用风格词:</div>
                <div>
                    <span class="tag-pill">写实</span>
                    <span class="tag-pill">动漫</span>
                    <span class="tag-pill">电影感</span>
                    <span class="tag-pill">梦幻</span>
                    <span class="tag-pill">水彩</span>
                    <span class="tag-pill">科幻</span>
                    <span class="tag-pill">插画</span>
                    <span class="tag-pill">古风</span>
                </div>
            </div>
        </div>
        
        <div class="mb-6">
            <label class="block text-gray-700 mb-2">不想要的元素 (可选)</label>
            <input type="text" class="t-input" placeholder="例如: 模糊, 变形, 文字">
        </div>
        
        <div class="flex justify-center mt-8">
            <button class="t-button t-button-primary w-full">
                <i class="ri-magic-line mr-2"></i>
                生成图片
            </button>
        </div>
        
        <div class="mt-8 text-center text-sm text-gray-500">
            <i class="ri-lightbulb-line mr-1"></i>
            提示: 详细的描述会让 AI 更准确地理解你想要的效果
        </div>
        
        <div class="mt-4 p-4 bg-blue-50 rounded-lg text-sm text-gray-600">
            <div class="font-medium mb-1">提示词示例:</div>
            <div class="mb-2">• 海边的小屋，夕阳西下，写实油画风格</div>
            <div class="mb-2">• 未来城市街景，霓虹灯，赛博朋克风格</div>
            <div>• 可爱猫咪在宇宙飞船上，动漫风格</div>
        </div>
    </div>
</body>
</html> 